<template>
  <div id="userList">
    <!--- 回收完成-->
    <el-dialog  :visible.sync="dialogVisible" width="550px" >
      <el-form :label-position="labelPosition" label-width="100px" :model="fromData" :rules="languageData.id=='Chinese'?rules2:rules" ref="fromData">
        <el-form-item :label="languageData.id=='Chinese'?'回收状态':'Status'" prop="usageStatus" style="width: 500px">
          <el-radio v-model="fromData.usageStatus" label="3">{{languageData.id=='Chinese'?'回收中':'Recycling'}}</el-radio>
          <el-radio v-model="fromData.usageStatus" label="1">{{languageData.id=='Chinese'?'回收完成':'Recycled'}}</el-radio>
        </el-form-item>
        <el-form-item :label="languageData.id=='Chinese'?'回收地址':'location'" prop="address" style="width: 500px">
          <el-input v-model="fromData.address"></el-input>
        </el-form-item>
        <el-form-item label="" style="margin-bottom: 0px;">
          <div style="text-align: right">
            <el-button  round class="el-button--primary"  style="width: 120px;" v-on:click="submitForm('fromData')"> {{languageData.public.done}} </el-button>
            <el-button  round @click="dialogVisible = false" style="width: 120px">{{languageData.public.cancel}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--设备状态记录详情-->
    <el-dialog  :visible.sync="dialogVisible2" width="40%" >
      <div class="alertBox" v-show="Record.length>0">
        <div class="card" v-for="list in Record" >
          <div class="clearfix"><div class="timeLabel left">{{list.createTime}}</div> <div class="left"> {{list.toStatusText}}</div><div class="cleae"></div></div>
          <div class="clearfix"><div class="timeLabel left"> </div><div><span class="city">{{list.remarkTo}}</span> <span class="el-icon-back back" v-show="list.remarkFrom && list.remarkTo"></span> <span class="city">{{list.remarkFrom}}</span></div> <div class="cleae"></div></div>
        </div>

      </div>
      <div class="card"  v-show="Record.length<=0">
        <div style="text-align: center;font-size: 16px;font-weight: bold">暂无该设备数据</div>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center">
      <el-button size="medium" round @click=" dialogVisible2 = false" style="width: 120px">{{languageData.public.close}}</el-button>
      </span>
    </el-dialog>
    <!--表格-->
    <div class="sech clearfix" :RecordListData="RecordListData">
      <div class="left" style="width: 50%;margin-bottom: 25px;" :UserListData="UserListData">
        <el-input class="saechIput"  v-model="fromData.deviceNumber" :placeholder="languageData.public.container"></el-input>
        <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn()"> </el-button>
      </div>
      <div class="right" style="width: 50%;text-align: right">
        <!--<el-button size="medium" class="bot" icon="el-icon-delete">删除</el-button>-->
        <!--<el-button size="medium" class="bot" icon="el-icon-document">导出excel</el-button>-->
        <!--<el-button size="medium" type="primary" class="bot check" icon="el-icon-plus">批量导入</el-button>-->
      </div>
      <div class="tableBox" :DeviceListData="DeviceListData">
        <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" :row-style="style1"  :header-row-style="style2">
        <el-table-column  width="55">
        </el-table-column>
          <!--设备号-->
        <el-table-column prop="deviceNumber" :label="languageData.admin.ImeiNo" >
        </el-table-column>
          <!--设备型号-->
        <el-table-column prop="model" :label="languageData.admin.deviceType" >
        </el-table-column>
          <!--设备使用商家-->
        <el-table-column prop="company" :label="languageData.admin.deviceOwer" >
        </el-table-column>
          <!--设备状态-->
        <el-table-column  prop="deviceStatusText" :label="languageData.admin.deviceStatus+'('+languageData.admin.battery+')'" width="120" style="text-align: center">
        </el-table-column>
          <!--设备使用状态-->
        <el-table-column  prop="usageStatusText" :label="languageData.admin.Usages" width="120">
        </el-table-column>
          <!--设备所在地-->
        <el-table-column  prop="" :label="languageData.admin.Location" width="120">
          <template slot-scope="scope">
            <!--<span class="clickBot">-->
            <!--<span class="el-icon-edit-outline"></span>-->
            <!--<span>重置密码</span>-->
            <!--</span>-->
            <span class="clickBot"  v-on:click="updateDeviceUsageStatusFn(scope.row.id)" style="margin-left: 20px;">
               <a>{{languageData.id=='Chinese'?'详情':'details'}}</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="languageData.admin.set"  width="150">
          <template slot-scope="scope">
            <!--<span class="clickBot">-->
            <!--<span class="el-icon-edit-outline"></span>-->
            <!--<span>重置密码</span>-->
            <!--</span>-->
            <span class="clickBot el-icon-edit-outline" v-show="scope.row.usageStatus == 4 || scope.row.usageStatus == 3">
              <span style="padding-left:10px;" v-on:click="updateDeviceUsageStatusFn(scope.row.id,1)">{{languageData.id=='Chinese'?'回收':'Recycle'}}</span>
            </span>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <div class="cleae" style="text-align: right;padding-right: 20px;padding-top: 20px;margin-bottom: 40px">
        <el-pagination layout="prev, pager, next" :page-count="fromData.count" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<style scoped>
  #userList{max-width: 1690px;padding-top: 25px;text-align: left}
  .saechIput{width: 392px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .bot{ width: 120px;text-align: center}
  .check{background-color: #0d71b7;margin-right: 60px;}
  .success-row {  background: #d9dddd;  }
  .tableBox{width: 100%;min-height: 200px;margin-top: 25px;}
  .clickBot{cursor: pointer;}
  .clickBot:hover{color:#409eff }
  .timeLabel{ width: 150px;display: block;height: 30px;}
  .back{ transform: rotateY(180deg);padding: 0px 10px}
  .city{ font-weight: bold}
  .card{padding: 0px 0px 10px 0px;}
  .border{ border: 1px dashed #e1e1e1;padding-bottom: 0px; padding: 10px;}
  .alertBox{max-height: 500px;overflow-y: scroll}
</style>
<script>
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import jsonListData from '../../../static/local.json'
  import Public from '../../vuex/public.js'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-divseList',
    created () {
      // 查看本页面路由 绑定对应页面class

      var usr = sessionStorage.getItem('user')
      if(usr) {
        usr = JSON.parse(usr)
        this.user.name = usr.nickName
        this.user.type = usr.type
        this.user.userId = usr.userId
        this.user.companyName = usr.companyName
        this.user.companyId = usr.companyId + ''
      }
    },
    data () {
      var indeofPassword = (rule, value, callback) => {
        if ( !this.fromData.recyclePosition.address) {
          callback(new Error('回收地不能为空'));
        }  else {
          callback();
        }
      };
      return {
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员',
          type: '',
          userId: null,
          companyName: null,
          companyId: null
        },
        fromShow: false,
        userSaech: null,
        Record:[{
          id: '',
          remarkTo: '',
          remarkFrom: '',
          createTime: '',
          toStatus: '',
          toStatusText: ''
        }],
        tableData2: [{
          id: 'No Data',
          deviceNumber: 'No Data',
          model: 'No Data',
          battery: 'No Data',
          deviceStatus: 'No Data',
          usageStatus: 'No Data',
          deviceStatusText: 'No Data',
          usageStatusText: 'No Data',
          company: 'No Data',
          location: 'No Data',
        }],
        style1: {height: '70px'},
        style2: {height: '70px', border: 'none 0px', background: '#d9dddd', 'margin-top': '25px'},
        fromData: {
          deviceId: null,
          usageStatus: '1',
          recyclePosition:{country: null, city: null, address: ''},
          deviceNumber: '',
          address:'',
          page: 1,
          pageSize: 10,
          count: 1,
          page2: 1,
          pageSize2: 20,
          count2: 1
        },
        rules: {
          usageStatus: [
            { required: true, message: 'Please choose a status', trigger: 'blur' },
          ],
          'address': [
            { required: true, message: 'Please fill the recycling address', trigger: 'blur' },
//            { validator: indeofPassword, trigger: 'blur' }
          ],
        },
        rules2: {
          usageStatus: [
            { required: true, message: '请选择回收状态', trigger: 'blur' },
          ],
          'address': [
            { required: true, message: '请填写回收地址', trigger: 'blur' },
//            { validator: indeofPassword, trigger: 'blur' }
          ],
        },
        dialogVisible: false, // 标记状态弹框
        dialogVisible2: false,// 详情弹框
        labelPosition: 'left'
      }
    },
    methods: {
      ...mapActions({
        updateDeviceUsageStatus: 'updateDeviceUsageStatus',
        getDeviceList: 'getDeviceList',
        addDeviceRecord: 'addDeviceRecord',
        showManages: 'showManages'
      }),
      tableRowClassName ({row, rowIndex}) {
        var x = rowIndex % 2
        if (x === 0) {
          return ''
        } else if (x === 1) {
          return 'success-row'
        }
        return ''
      },
      handleCurrentChange (val) {
        this.fromData.page = parseInt(val)
        var parm = {
          deviceNumber: this.fromData.deviceNumber,
          page: this.fromData.page,
          pageSize: this.fromData.pageSize
        }
        this.getDeviceList(parm)
      },
      handleClose (a) {
          this.dialogVisible = true
      },
      handleClose2 (a) {
        this.dialogVisible2 = true
      },
      // 搜索
      saechFn(){
        this.fromData.page = 1
        this.fromData.pageSize = 10

        var parm = {
          deviceNumber: this.fromData.deviceNumber,
          page: this.fromData.page,
          pageSize: this.fromData.pageSize
        }
        this.getDeviceList(parm)
      },
      // 设备列表解析
      deviceListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.fromData.count = Math.ceil(cunt / this.fromData.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        for (let i in res) {
          var deviceStatus = this.languageData.id=='English'? 'abnormal':'异常'
            ,usageStatus = this.languageData.id=='English'? 'abnormal':'异常';
          if(res[i].deviceStatus == 0) {deviceStatus = '离线'; if(this.languageData.id=='English'){deviceStatus = 'Offline' }}
          if(res[i].deviceStatus == 1) {deviceStatus = '在线'; if(this.languageData.id=='English'){deviceStatus = 'Online' }}
          if(res[i].deviceStatus == 2) {deviceStatus = '休眠'; if(this.languageData.id=='English'){deviceStatus = 'sleep' }}
          if(res[i].usageStatus == 0) {usageStatus = '不可用'; if(this.languageData.id=='English'){usageStatus = 'Unavailable' }}
          if(res[i].usageStatus == 1) {usageStatus = '闲置中'; if(this.languageData.id=='English'){usageStatus = 'Idle' }}
          if(res[i].usageStatus == 2) {usageStatus = '使用中'; if(this.languageData.id=='English'){usageStatus = 'In Use' }}
          if(res[i].usageStatus == 3) {usageStatus = '回收中'; if(this.languageData.id=='English'){usageStatus = 'Recycling' }}
          if(res[i].usageStatus == 4) {usageStatus = '待回收'; if(this.languageData.id=='English'){usageStatus = 'Pending' }}
          var pu = {
            id: res[i].id,
            deviceNumber: res[i].deviceNumber,
            model: res[i].model,
            battery: res[i].battery + '%',
            deviceStatus: res[i].deviceStatus,
            usageStatus: res[i].usageStatus,
            deviceStatusText: deviceStatus + '(' + res[i].battery + '%)',
            usageStatusText: usageStatus,
            company: res[i].company,
            location: res[i].location || '位置异常',
          }
          this.tableData2.push(pu)
        }
      },
      // 标记设备列表
      updateDeviceUsageStatusFn (id,status){
        this.fromData.deviceId = id
        if(status == 1){
          this.fromData.address = ''
          this.dialogVisible = true
        }else {
          this.fromData.page2 = 1;
          this.fromData.pageSize2 = 20;
          var parm = {
            deviceId : JSON.parse(id),
            page: this.fromData.page2,
            pageSize: this.fromData.pageSize2
          }
          this.showManages(parm)
          this.dialogVisible2 = true
        }
      },
      // 修改标记
      updateStatusPost(){
        if(!this.fromData.text){
          var text = '备注不能为空'
          this.openError(text)
          return false
        }
        var parm = {
          deviceId: JSON.stringify(this.fromData.deviceId),
          status: 1, // 0：运输中 1：运输完成 2：运输异常
          location: this.fromData.address,
        }
        this.addDeviceRecord(parm)
        this.dialogVisible = false
      },
      // 登陆
      login () {
        this.$router.push({ name: "map" })
      },
      // 操作状态
      listStatus (res) {
        this.loading = false
        if (res.status == 0) {
          // 修改成功
          this.openSuccess(res.message)
          var parm = {
            deviceNumber: this.fromData.deviceNumber,
            page: this.fromData.page,
            pageSize: this.fromData.pageSize
          }
          this.getDeviceList(parm)
        }
        if (res.status != 0) {
          // 修改成功 修改失败
          if(res.status == 1 ){
            var parm = {
              deviceNumber: this.fromData.deviceNumber,
              page: this.fromData.page,
              pageSize: this.fromData.pageSize
            }
            this.getDeviceList(parm)
            this.fromData.address = ''
          }else {
            this.openError(res.message)
          }
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      //
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
//            this.updateStatusPost()
            this.fromData.recyclePosition.address = this.fromData.address
            var parm = {
              deviceId: JSON.stringify(this.fromData.deviceId),
              status: JSON.parse(this.fromData.usageStatus), // 0：运输中 1：运输完成 2：运输异常
              location: this.fromData.address,
            }
            this.addDeviceRecord(parm)
            this.dialogVisible = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 记录列表解析
      RecordListFn(res){
        var remarkTo = '',createTime = {ymd: '', hms: '', times: '', week: '', md: '', m: '', d: '', s: '', y: ''}
        res = res.body.data;
        this.Record = []
        for (let i in res) {
          var remarkFrom = {}, toStatusTetx = ''
          // 解析创建时间
          if(res[i].createTime){
            createTime = Public.publicLo.timeCheng(res[i].createTime)
          }
          // 解析地址
          var str ={
            destPlId:'',
            transitAddress:'',
            originPlId:""
          }
          if(res[i].remark){
            str =JSON.parse(res[i].remark)
          }
          var ctiyText = ''
          if(str.destPlId){

            // ctiyText = Public.publicLo.getCityById(str.destPlId).stationCN
            // remarkFrom = Public.publicLo.getCityById(str.destPlId).stationCN
          }else if(str.transitAddress){
            ctiyText = str.transitAddress
            remarkFrom = str.transitAddress
          }else if(str.originPlId){
            ctiyText = Public.publicLo.getCityById(str.originPlId).stationCN
            remarkFrom = Public.publicLo.getCityById(str.originPlId).stationCN
          }else {
            ctiyText = ''
            remarkFrom = ''
          }

          // // 解析地址
          // if(str.city){
          //   // 解析城市
          //   var city = str.city.split('_')
          //   // 记录国家 code
          //   var country = city[0]
          //   // 省份
          //   remarkFrom.country = jsonListData[country]
          //   var p = country + '_' + city[1]
          //   //城市
          //   remarkFrom.city = jsonListData[country][p][str.city]
          //   if(remarkFrom.address){
          //     ctiyText = remarkFrom.country.CN + '/'+ remarkFrom.city.CN + '/' + remarkFrom.address
          //   }else {
          //     ctiyText = remarkFrom.country.CN + '/'+ remarkFrom.city.CN
          //   }
          // }else {
          //   remarkFrom.country = ''
          //   remarkFrom.city = ''
          // }
          // 解析状态
          if(res[i].toStatus == 1) {toStatusTetx = '闲置中'; if(this.languageData.id=='English'){toStatusTetx = 'Idle' }  remarkTo = ''}
          if(res[i].toStatus == 2) {toStatusTetx = '使用中'; if(this.languageData.id=='English'){toStatusTetx = 'In Use' }}
          if(res[i].toStatus == 3) {toStatusTetx = '回收中'; if(this.languageData.id=='English'){toStatusTetx = 'Recovery' }}
          if(res[i].toStatus == 4) {toStatusTetx = '待回收'; if(this.languageData.id=='English'){toStatusTetx = 'Recycled' }}
          var pu  = {
            id: res[i].id,
            remarkTo:ctiyText  ,
            remarkFrom: remarkTo,
            createTime: createTime.times,
            toStatus: res[i].toStatus,
            toStatusText: toStatusTetx
          }
          remarkTo = ctiyText
          this.Record.unshift(pu)
        }

      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })
      }
    },
    computed: {
      DeviceListData: function () {
      var parm = this.DeviceList
      if (parm) {
        this.deviceListFn(parm)
      }
      return 1
      },
      UserListData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      RecordListData: function () {
      var parm = this.RecordList
      if (parm) {
        this.RecordListFn(parm)
      }
      return 1
    },
  ...mapState([
    'updateStatus',
    'addOderData',
    'language',
    'DeviceList',
    'RecordList'
  ])
    },
    mounted () {
      // 配置顶部菜单
      var parm = {
        deviceNumber: this.fromData.deviceNumber,
        page: this.fromData.page,
        pageSize: this.fromData.pageSize
      }
      this.getDeviceList(parm)
    },
    components: {
    }
  }
</script>

